<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('记上课界面')"/>

</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeIn">
    <div class="row">
        <div class="col-sm-12">
            <div class="tabs-container">
                <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true">今日上课</a>
                    </li>
                    <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">补记上课</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div id="tab-1" class="tab-pane active">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="ibox float-e-margins">
                                        <div class="ibox-title">
                                            <h5>日期:
                                                <large class="m-l-sm"><span id="spanWeek"></span>
                                                    [[${#dates.format(new java.util.Date(),'yyyy-MM-dd')}]]
                                                </large>
                                            </h5>
                                        </div>
                                        <div class="col-sm-12 search-collapse">
                                            <form id="formId">
                                                <div class="select-list">
                                                    <ul>
                                                        <li>
                                                            <label>班级名称：</label>
                                                            <input type="text" name="className"/>
                                                        </li>
                                                        <li>
                                                            <a class="btn btn-primary btn-rounded btn-sm"
                                                               onclick="$.table.search('formId','class-table')"><i
                                                                    class="fa fa-search"></i>&nbsp;搜索</a>
                                                            <a class="btn btn-warning btn-rounded btn-sm"
                                                               onclick="$.form.reset('formId','class-table')"><i
                                                                    class="fa fa-refresh"></i>&nbsp;重置</a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </form>
                                        </div>
                                        <div class="btn-group-sm" id="toolbarA" role="group">
                                            <a class="btn btn-success" onclick="nonscheduled()">
                                                <i class="fa fa-plus"></i> 未排课记上课
                                            </a>
                                        </div>
                                        <div class="col-sm-12 select-table table-striped">
                                            <table id="class-table"></table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="tab-2" class="tab-pane">
                        <div class="panel-body">
                            <div class="col-sm-12 search-collapse">
                                <form id="formId2">
                                    <div class="select-list">
                                        <ul>
                                            <li>
                                                <label>班级名称：</label>
                                                <input type="text" name="className"/>
                                            </li>
                                            <li>
                                                <a class="btn btn-primary btn-rounded btn-sm"
                                                   onclick="$.table.search('formId2','all-class-table')"><i
                                                        class="fa fa-search"></i>&nbsp;搜索</a>
                                                <a class="btn btn-warning btn-rounded btn-sm"
                                                   onclick="$.form.reset('formId2','all-class-table')"><i
                                                        class="fa fa-refresh"></i>&nbsp;重置</a>
                                            </li>
                                        </ul>
                                    </div>
                                </form>
                            </div>
                            <div class="col-sm-12 select-table table-striped">
                                <table id="all-class-table"></table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">
    var startDate = $.common.dateFormat(new Date());
    var data1 = [[${@dict.getType('sys_record_status')}]];
    var nowWeek = [[${#dates.dayOfWeek(new java.util.Date())-1}]];
    var weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    $(function () {
        $("#spanWeek").html(weeks[nowWeek]);
        queryTodayList();
        queryAllList();
    });

    function nonscheduled() {
        $.modal.open("未排班记上课",ctx + "teaching/record/nonscheduled");
    }

    function queryTodayList() {
        var prefix = ctx + "teaching/schedule";
        var options = {
            toolbar:"toolbarA",
            id: "class-table",
            url: prefix + "/list",
            modalName: "今日上课班级",
            queryParams: {startDate: startDate},
            // showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            columns: [
                {
                    field: 'scheduleId',
                    title: '主键ID',
                    visible: false
                },
                {
                    title: '上课时段',
                    formatter: function (value, row, index) {
                        return $.common.dateFormat(row.startDate + ' ' + row.startTime, 'HH:mm') + '-' + $.common.dateFormat(row.startDate + ' ' + row.endTime, 'HH:mm');
                    }
                },
                {
                    field: 'className',
                    title: '班级姓名',
                    formatter: function (value, row, index) {
                        return '<a href="javascript:void(0)" onclick="detail(\'' + row.classId + '\')">' + value + '</a>';
                    }
                },
                {
                    field: 'teacherName',
                    title: '上课老师'

                },
                {
                    field: 'status',
                    title: '状态',
                    formatter: function (value, row, index) {
                        return $.table.selectDictLabel(data1, value);
                    }
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var actions = [];
                        if (row.status == 0) {
                            actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="detail(\'' + row.scheduleId + '\')"><i class="fa fa-edit"></i>记上课</a> ');
                        } else {
                            actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="editModal(\'' + row.scheduleId + '\')"><i class="fa fa-edit"></i>编辑</a> ')
                        }
                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);
    }

    function queryAllList() {
        var prefix = ctx + "teaching/schedule";
        var options = {
            id: "all-class-table",
            url: prefix + "/list",
            modalName: "今日上课班级",
            queryParams: {
                params: {
                    before: true,
                    today: startDate
                },
                status: '0',
            },
            // showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            columns: [
                {
                    field: 'scheduleId',
                    title: '主键ID',
                    visible: false
                },
                {
                    title: '上课日期',
                    formatter: function (value, row, index) {
                        return $.common.dateFormat(row.startDate, 'yyyy-MM-dd');
                    }
                },
                {
                    title: '上课时段',
                    formatter: function (value, row, index) {
                        return $.common.dateFormat(row.startDate + ' ' + row.startTime, 'HH:mm') + '-' + $.common.dateFormat(row.startDate + ' ' + row.endTime, 'HH:mm');
                    }
                },
                {
                    field: 'className',
                    title: '班级姓名',
                    formatter: function (value, row, index) {
                        return '<a href="javascript:void(0)" onclick="detail(\'' + row.scheduleId + '\')">' + value + '</a>';
                    }
                },
                {
                    field: 'teacherName',
                    title: '上课老师'

                },
                {
                    field: 'status',
                    title: '状态',
                    formatter: function (value, row, index) {
                        return $.table.selectDictLabel(data1, value);
                    }
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var actions = [];
                        if (row.status == 0) {
                            actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="detail(\'' + row.scheduleId + '\')"><i class="fa fa-edit"></i>记上课</a> ');
                        } else {
                            actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="editModal(\'' + row.scheduleId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                        }

                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);
    }

    function detail(scheduleId) {
        var url = ctx + 'teaching/record/consume/' + scheduleId;
        $.modal.openTab("消课班级", url);
    }

    function editModal(scheduleId) {
        var url = ctx + 'teaching/record/editModal/' + scheduleId;
        $.modal.openTab("编辑", url);
    }

</script>
</body>
</html>
